<template>

    <div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div v-if="$hasPer('TrainingProgram:add') || $hasPer('TrainingProgram:excel')" class="search-s page-public-s" style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item>
                            <el-button v-if="$hasPer('TrainingProgram:add')" @click="nodeClick('', 0)" icon="ele-Plus" type="primary"> 新增 </el-button>
                            <el-button v-if="$hasPer('TrainingProgram:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <el-table ref="excelRef" :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">

                                        <el-table-column min-width="200" label="课程类型"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Course" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_CourseType">{{ scope.row.v_CourseType }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="计划培训日期"  align="center" prop="v_PlanMonth" sortable>
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="d_Conth" typeVal="date" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_PlanMonth">{{ scope.row.v_PlanMonth }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="课程名称"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Name" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_CourseName">{{ scope.row.v_CourseName }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="培训讲师"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Teacher" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_Teacher">{{ scope.row.v_Teacher }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="培训内容"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Content" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_Content">{{ scope.row.v_Content }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="培训对象"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Trainee" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_Trainee">{{ scope.row.v_Trainee }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" prop="n_Mins" label="培训时长" sortable align="center" />

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="是否需要考试"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Exam" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.isNeedExam" style="color: #67C23A;">需要</span>
                                                    <span v-else style="color: #E6A23C;">不需要</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="当前计划状态"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_States" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.n_States === 0">{{scope.row.v_StatesName}}</span>
                                                    <span style="color: #67C23A;" v-if="scope.row.n_States === 1">{{scope.row.v_StatesName}}</span>
                                                    <span style="color: #E6A23C;" v-if="scope.row.n_States === 2">{{scope.row.v_StatesName}}</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="180" :show-overflow-tooltip="true" prop="createdTime" label="创建时间"  align="center" sortable>
                                            <template #default="scope">
                                                <span v-if="scope.row.createdTime">{{ scope.row.createdTime }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="180" :show-overflow-tooltip="true" prop="updatedTime" label="更新时间"  align="center" sortable>
                                            <template #default="scope">
                                                <span v-if="scope.row.updatedTime">{{ scope.row.updatedTime }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column width="340" label="操作" align="center" fixed="right">
                                            <el-table-column :show-overflow-tooltip="true" min-width="340" align="center">
                                                <template #header>
                                                    <el-button class="icon-e" @click='searchClick' icon="ele-Search" size="small" type="primary" text> 查询 </el-button>
                                                    <el-button class="icon-e clear-bg" style="background-color: transparent !important;" size="small" @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
                                                </template>
                                                <template #default="scope">
                                                    <div class="operate-s">
                                                        <el-button @click="detailHandle(scope.row.id)" class="icon-e" icon="ele-View" size="small" text type="success">详情</el-button>
                                                        <template v-if="scope.row.n_States !== 1">
                                                            <el-button v-if="$hasPer('TrainingProgram:uploadFile')" @click="nodeClick(scope.row , 2)" class="icon-e" icon="ele-Upload" size="small" text type="warning">上传学习资料</el-button>
                                                            <el-button v-if="$hasPer('TrainingProgram:issue')" @click="issueClick(scope.row.id, getData)" class="icon-e" icon="ele-Edit" size="small" text type="success">发布</el-button>
                                                            <el-button v-if="$hasPer('TrainingProgram:edit')" @click="nodeClick(scope.row , 1)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                            <el-button v-if="$hasPer('TrainingProgram:del')" @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                        </template>
                                                        <template v-else>
                                                            <el-dropdown v-if="$hasPer('TrainingProgram:cancel') && $hasPer('TrainingProgram:study') && $hasPer('TrainingProgram:exercise') && $hasPer('TrainingProgram:exam') && $hasPer('TrainingProgram:studyRecord') && $hasPer('TrainingProgram:examRecord')" trigger="click">
                                                                <el-button style="margin: 0 10px;" class="el-dropdown-link" size="small" text type="warning">功能菜单<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
                                                                <template #dropdown>
                                                                    <el-dropdown-menu>
                                                                        <el-dropdown-item v-if="$hasPer('TrainingProgram:cancel')" @click="unpublishClick(scope.row.id,getData)" icon="Failed">取消发布</el-dropdown-item>
                                                                        <el-dropdown-item v-if="$hasPer('TrainingProgram:study')" @click="nodeClick(scope.row , 3)" icon="CollectionTag">在线学习</el-dropdown-item>
                                                                        <el-dropdown-item v-if="$hasPer('TrainingProgram:exercise')" @click="nodeClick(scope.row , 4)" icon="EditPen">在线刷题</el-dropdown-item>
                                                                        <el-dropdown-item v-if="$hasPer('TrainingProgram:exam')" @click="nodeClick(scope.row , 5)" icon="Edit">在线考试</el-dropdown-item>
                                                                        <el-dropdown-item v-if="$hasPer('TrainingProgram:studyRecord')" @click="nodeClick(scope.row , 6)" icon="List">学习记录</el-dropdown-item>
                                                                        <el-dropdown-item v-if="$hasPer('TrainingProgram:examRecord')" @click="nodeClick(scope.row , 7)" icon="Reading">考试记录</el-dropdown-item>
                                                                    </el-dropdown-menu>
                                                                </template>
                                                            </el-dropdown>
                                                        </template>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <!-- 新增/修改 -->
        <AddEditTrainingProgram
            :personInfo="personInfo"
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
            @updateData="getData"
        />
        <!-- 文件上传 -->
        <uploadFile
            isAccept=".docx, .xlsx, .pdf, .mp4"
            :fileInfo="fileInfo"
            :isUseDialog="fileDialog"
            @cancelFileClick="cancelFileClick"
            @controlFileClick="controlFileClick"
            @updateData="getData"
        ></uploadFile>
        <!-- 在线学习 -->
        <OnlineLearning
            :fileInfo="learnInfo"
            :isUseDialog="learnDialog"
            @cancelLearnClick="cancelLearnClick"
        ></OnlineLearning>
        <!-- 在线刷题 -->
        <DoExercise
            setStatus="exam"
            :repairInfo="paperInfo"
            :isUseDialog="paperDialog"
            @cancelPaperClick="cancelPaperClick"
        />
        <!-- 在线考试 -->
        <OnlineExam
            :repairInfo="examInfo"
            :isUseDialog="examDialog"
            @cancelExamClick="cancelExamClick"
        />
        <!-- 学习记录 -->
        <MyStudy
            :recordInfo="studyInfo"
            :recordDialog="studyDialog"
            @cancelStudyClick="cancelStudyClick"
        />
        <!-- 考试记录 -->
        <ExamRecord
            :recordInfo="recordInfo"
            :recordDialog="recordDialog"
            @cancelRecordClick="cancelRecordClick"
        />
        <!-- 详情 -->
        <DetailModel
            :detailInfo="detailInfo"
            :MdetailDialog="MdetailDialog"
            labelWidth="140px"
            @cancelDetailClick="cancelDetailClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import getTableData from '/@/utils/getTableData';
import { 
    EduTrainingPlanPage , 
    EduTrainingPlanRelease , 
    EduTrainingPlanUnRelease , 
    EduTrainingPlanDelete , 
    OmsEduExaminationDBList , 
    OmsEduExamOLStartTheExamination ,
    EduTrainingPlanDetail ,
} from '/@/api/centerControl/sms';
import {
    sysOrgTree, // 组织架构树
    sysOrgList, // 组织架构列表
    sysUserselectorV2, // 用户列表
    sysPosList, // 岗位列表
} from '/@/api/centerControl/pubilc';
import AddEditTrainingProgram from '../component/sms/add-edit-TrainingProgram.vue';
import uploadFile from '../component/uploadFile.vue';
import OnlineLearning from '../component/sms/online-learning.vue';
import { ElMessageBox , ElMessage } from 'element-plus';
import DoExercise from '../component/sms/do-exercise.vue';
import OnlineExam from '../component/sms/online-exam.vue';
import ExamRecord from '../component/sms/exam-record.vue';
import MyStudy from '../component/sms/my-study.vue';
import DetailModel from '../component/detail-model.vue';
import SearchModel from '../component/search-model.vue';
import { getUserInfo } from '/@/api/user';
import { exportToExcel } from '/@/utils/exportToExcel';

export default defineComponent( {
    name: 'TrainingProgram',
    components: {
        AddEditTrainingProgram,
        uploadFile,
        OnlineLearning,
        DoExercise,
        OnlineExam,
        ExamRecord,
        MyStudy,
        SearchModel,
        DetailModel,
    },
    setup(props){
        const isUseDialog = ref(); // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref(); // 传递子组件数据
        let searchObj:any = reactive({});
        const fileDialog = ref();
        const fileInfo = ref();
        const learnInfo = ref();
        const learnDialog = ref(false);
        const paperInfo = ref();
        const paperDialog = ref(false);
        let userInfo:any = '';
        const examInfo = ref();
        const examDialog = ref(false);
        const recordInfo = ref();
        const recordDialog = ref(false);
        const studyInfo = ref();
        const studyDialog = ref(false);

        const basicsInfo: any = ref([]);
        const searInfo: any = ref();
        const personInfo: any = ref('');

        /*** cancelFileClick 文件上传取消事件 */
        const cancelFileClick = () => {
            fileDialog.value = false;
        };

        /*** controlFileClick 文件上传提交事件 */
        const controlFileClick = () => {
            fileDialog.value = false;
        }

        /*** 获取部门组织架构树、部门下拉列表、用户下拉列表、岗位下拉列表数据 */
        const getNeedInfu = async () => {
            let ras: any = await sysOrgTree({});
            let rbs: any = await sysOrgList({});
            let rcs: any = await sysUserselectorV2({});
            let rds: any = await sysPosList({});
            let setObj: any = {};
            if(ras.success) setObj.treeInfo = ras.data;
            if(rbs.success) setObj.orgInfo = rbs.data;
            if(rcs.success) setObj.userInfo = rcs.data;
            if(rds.success) setObj.posInfo = rds.data;
            console.log(setObj,'setObj')
            personInfo.value = JSON.stringify(setObj);
        }

        /*** issueClick 发布事件 */
        const issueClick = (val: String | Number, updateFun: Function) => {
            ElMessageBox.confirm('正在进行数据发布，请确定？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await EduTrainingPlanRelease(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        };

        /*** unpublishClick 取消发布 */
        const unpublishClick = (val: String | Number, updateFun: Function) => {
            ElMessageBox.confirm('正在取消数据发布，请确定？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await EduTrainingPlanUnRelease(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        };

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            let newObj = Object.keys(searInfo.value);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = searInfo.value[i];
                })
            }
        };

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searInfo.value = {};
            let newObj = Object.keys(searchObj);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                })
            }
            initInfoFun();
        };

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object , num: number) => {
            if(num === 0){
                repairInfo.value = '';
                isUseDialog.value = true;
            }else{
                funMenu(val,num);
            }
        };

        const funMenu = (val:any , num: number) => {
            switch(num){
                case 1:
                    // 取消发布
                    repairInfo.value = JSON.stringify(val);
                    isUseDialog.value = true;
                    break;
                case 2:
                    // 文件上传
                    val.sourceType = 10;
                    val.sourceId = val.id;
                    val.titleCon = '上传培训资料';
                    fileInfo.value = JSON.stringify(val);
                    fileDialog.value = true;
                    break;
                case 3:
                    // 在线学习
                    learnInfo.value = JSON.stringify(val);
                    learnDialog.value = true;
                    break;
                case 4:
                    // 在线刷题
                    let getData = doEcerciseFun(val.id);
                    getData.then(res => {
                        console.log(res,'res')
                        let setObj: any = {};
                        let totalNum = 0;
                        res.map((i: any) => {
                            totalNum += i.n_Score;
                        });
                        setObj.titleCon = val.v_CourseName;
                        // setObj.paperName = val.v_Name;
                        setObj.paperArr = res;
                        setObj.totalNum = totalNum;
                        paperInfo.value = JSON.stringify(setObj);
                        paperDialog.value = true;
                    });
                    break;
                case 5:
                    // 在线考试
                    let getPaper = getPaperFun(val.id,userInfo.id);
                    getPaper.then((res: any) => {
                        console.log(res,'res')
                        let setObj: any = {};
                        let totalNum = 0;
                        res.map((i: any) => {
                            totalNum += i.n_Score;
                        });
                        setObj.titleCon = val.v_CourseName;
                        setObj.paperName = val.v_Name;
                        setObj.paperArr = res;
                        setObj.totalNum = totalNum;
                        setObj.userId = userInfo.id;
                        setObj.l_TrainingPlanId = val.id;
                        setObj.setStatus = 'new';
                        examInfo.value = JSON.stringify(setObj);
                        examDialog.value = true;
                    })
                    break;
                case 6:
                    studyInfo.value = JSON.stringify(val);
                    studyDialog.value = true;
                    break;
                case 7:
                    recordInfo.value = JSON.stringify(val);
                    recordDialog.value = true;
                    break;
                // case 8:
                //     console.log('考试考卷')
                //     break;
            }
        };

        /*** doEcerciseFun 在线刷题 */
        const doEcerciseFun = async(val: Number) => {
            let param = { l_TrainingPlanId: val , sortField: 'n_Sort' , sortOrder: 'ascend' }
            let res: any = await OmsEduExaminationDBList(param);
            if(res.success) return res.data;
        }

        /*** getPaperFun 在线考试试卷获取 */
        const getPaperFun = async(val: number, userId: number) => {
            let param: any = {}
            param.l_TrainingPlanId = val;
            param.l_SysUserId = userId;
            let res: any = await OmsEduExamOLStartTheExamination(param);
            console.log(res,'题库数据')
            if(res.success) return res.data;
        }

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number, updateFun: Function) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await EduTrainingPlanDelete(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        };

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        };

        /*** controlUseClick 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false
        };

        /*** cancelLearnClick 在线学习关闭事件 */
        const cancelLearnClick = () => {
            learnDialog.value = false;
        }

        /*** cancelPaperClick 在线刷题关闭事件 */
        const cancelPaperClick = () => {
            paperDialog.value = false;
        }

        /*** cancelExamClick 在线考试取消事件 */
        const cancelExamClick = () => {
            examDialog.value = false;
        }

        /** cancelRecordClick 考试记录关闭事件 */
        const cancelRecordClick = () => {
            recordDialog.value = false;
        }

        /*** cancelStudyClick 学习记录关闭事件 */
        const cancelStudyClick = () => {
            studyDialog.value = false;
        }

        /*** 获取需要查询的数据 */
        const searchHandel = (val: any) => {
            searInfo.value = val;
        }

        /*** ================================= 详情类数据操作 =================================  */
        const MdetailDialog = ref(false);
        const detailInfo = ref();
        /*** 获取详情接口数据 */
        const getDetailFun = async (id: number) => {
            let res: any = await EduTrainingPlanDetail({id: id});
            if(res.success){
                let setArr: any = [];
                let detailObj: any = {};
                detailObj['课程类型'] = res.data.v_CourseType;
                detailObj['计划培训日期'] = res.data.v_PlanMonth;
                detailObj['课程名称'] = res.data.v_CourseName;
                detailObj['培训讲师'] = res.data.v_Teacher;
                detailObj['培训内容'] = res.data.v_Content;
                detailObj['培训对象'] = res.data.v_Trainee;
                detailObj['培训时长(分钟)'] = res.data.n_Mins;
                detailObj['是否需要考试'] = res.data.isNeedExam ? '需要' : '不需要';
                detailObj['培训计划状态'] = res.data.v_StatesName;
                setArr = [{
                    formTitle: '基础信息',
                    type: 'form',
                    info: detailObj,
                }];
                detailInfo.value = setArr;
                MdetailDialog.value = true;
            }
        }
        /*** 详情 */
        const detailHandle = (id: number) => {
            getDetailFun(id);
        }
        /*** 详情关闭事件 */
        const cancelDetailClick = () => {
            MdetailDialog.value = false;
        }
        /*** ================================= 详情类数据操作 =================================  */

        /*** 初始化数据 */
        const initInfoFun = () => {
            basicsInfo.value = [{
                    typeId: 'i_Course', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: 'text', // 输入类型(number,text等) --- 选填
                    searchVal: 'V_CourseType', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '课程类型', // placeholder数据 --- 必填
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'burl', // 事件类型(如burl/change等) --- 选填
                    defaultEvent: 'courseEvent', // 事件名称 --- 选填
                },{
                    typeId: 'd_Conth', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_PlanMonth', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '培训日期', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等）
                    defaultEvent: 'monthChange', // 事件名称 --- 选填
                },{
                    typeId: 'i_Name', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_CourseName', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '课程名称', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'burl', // 事件类型（如burl/change等）
                    defaultEvent: 'nameEvent', // 事件名称 --- 选填
                },{
                    typeId: 'i_Teacher', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Teacher', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '培训讲师', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'burl', // 事件类型（如burl/change等）
                    defaultEvent: 'teacherEvent', // 事件名称 --- 选填
                },{
                    typeId: 'i_Content', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Content', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '培训内容', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'burl', // 事件类型（如burl/change等）
                    defaultEvent: 'contentEvent', // 事件名称 --- 选填
                },{
                    typeId: 'i_Trainee', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Trainee', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '培训对象', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'burl', // 事件类型（如burl/change等）
                    defaultEvent: 'traineeEvent', // 事件名称 --- 选填
                },{
                    typeId: 'i_Exam', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isNeedExam', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '是否需要考试', // placeholder数据
                    defaultProp: [
                        {label: '需要' , value: true},
                        {label: '不需要' , value: false},
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等）
                    defaultEvent: () => {}, // 事件名称 --- 选填
                },{
                    typeId: 'i_States', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'n_States', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '培训计划状态', // placeholder数据
                    defaultProp: [
                        {label: '草稿' , value: 0},
                        {label: '发布' , value: 1},
                        {label: '关闭' , value: 2},
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: 'change', // 事件类型（如burl/change等）
                    defaultEvent: () => {}, // 事件名称 --- 选填
                },
            ]
        }

        onMounted(async() => {
            let res: any = await getUserInfo();
            if(res.success) userInfo = res.data;
            getNeedInfu();
            initInfoFun();
        });

        /*** ================================= 导出数据函数操作 ================================= */
        const excelRef: any = ref(null);
        const handleExport = () => {
            if(excelRef.value){
                if(excelRef.value.data.length !== 0){
                    let tableExcel: any = [];
                    let tableArr = excelRef.value.data;
                    tableArr.map((item: any) => {
                        let tableObj: any = {};
                        tableObj['课程类型'] = item.v_CourseType ? item.v_CourseType : '-';
                        tableObj['计划培训日期'] = item.v_PlanMonth ? item.v_PlanMonth : '-';
                        tableObj['课程名称'] = item.v_CourseName ? item.v_CourseName : '-';
                        tableObj['培训讲师'] = item.v_Teacher ? item.v_Teacher : '-';
                        tableObj['培训内容'] = item.v_Content ? item.v_Content : '-';
                        tableObj['培训对象'] = item.v_Trainee ? item.v_Trainee : '-';
                        tableObj['培训时长(分钟)'] = item.n_Mins ? item.n_Mins : '-';
                        tableObj['是否需要考试'] = item.isNeedExam ? '需要' : '不需要';
                        tableObj['培训计划状态'] = item.v_StatesName ? item.v_StatesName : '-';
                        tableExcel.push(tableObj);
                    });
                    exportToExcel(tableExcel,'培训计.xlsx');
                }else{
                    ElMessage({
                        type: 'error',
                        message: '暂无数据导出',
                    })
                }
            }
        }
        /*** ================================= 导出数据函数操作 ================================= */

        return {
            ...getTableData(EduTrainingPlanPage,{},searchObj),
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            resetClick,
            searchClick,
            
            issueClick,
            unpublishClick,
            cancelFileClick,
            fileDialog,
            fileInfo,
            controlFileClick,
            learnInfo,
            learnDialog,
            cancelLearnClick,
            paperDialog,
            paperInfo,
            cancelPaperClick,
            examDialog,
            examInfo,
            cancelExamClick,
            cancelRecordClick,
            recordDialog,
            recordInfo,
            studyInfo,
            studyDialog,
            cancelStudyClick,
            personInfo,

            // 导出Excel
            excelRef,
            handleExport,

            // 详情
            MdetailDialog,
            detailHandle,
            detailInfo,
            cancelDetailClick,

            // 查询事件
            basicsInfo,
            searchHandel,
        }
    },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
    #friend-merchant-manage {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        .upload-demo{
            margin-left: 12px;
            margin-top: 2px;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
.clear-bg{
    background-color: transparent !important;
}
</style>